<template>
	<view class="mainbgc">
		<!-- //搜索内容-->
		<u-popup round="20" :show="show" @close="close">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="itemscreen2 flexleft margin_top" @click="pianqu=true">
					<view class="strongtext minwidth">客户片区</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择客户片区" v-model="pqtext">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="surepop">确认</view>
				</view>

			</view>
		</u-popup>
		<header-top :messageInfo="{typeFlag:true,message:'客户列表',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexright" @click="submit">确定</view>
			</view>
		</header-top>
		<view class="mainpadding">
			<view class="flexbetween">
				<view class="sousuo margin_right" @click="show=true">筛选</view>
				<input class="input-text" type="text" placeholder="请输入客户名称" v-model="sjinfo">
				<view class="sousuo" @click="init">搜索</view>
			</view>
			<view class="flexcenter" v-if="!list.total">
				<view class="placeholderimage"></view>
			</view>
			<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id" @click="selectItem(item)">
				<view class="flexleft">
					<view class="leftradio"  @click="checkbtn">
						<!-- 选中 -->
						<view v-show="item.id==current" class="selecticon">
							<image src="@/static/image/system/dui.png" mode=""></image>
						</view>
						<!-- 未选中 -->
						<view v-show="item.id!=current" class="noselecticon"></view>
					</view>
					<view style="width: 92%;">
						<view class="flexbetween" style="position: relative;">
							<view class="flexleft">
								<!-- 店铺、个人图片 -->
								<view class="titletext">{{item.customer_name}}</view>
							</view>
							<view class="flexright">
								<view class="sousuo" @click.stop="phone(item.customer_mobile)">{{item.customer_mobile}}</view>
							</view>
						</view>
						<view class="smalltext margin_top1">地址：{{item.getgoods_address}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 片区选择器 -->
		<u-picker :show="pianqu" :columns="columnspianqu" @cancel="pianqu=false" @confirm="pianquconfirm"
			keyName="name"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				checkbox:false,
				mode: 'single',
				current: '',
				show: false,
				mindates: "",
				sjinfo: '', //商家信息
				pqtext: '', //片区
				// 分页处理数据
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				// 片区
				pianqu: false,
				columnspianqu: [],
				pianquid: "",
			}
		},
		onLoad(options) {
			this.getpianqu()
		},
		onShow() {
			this.init()
		},
		methods: {
			checkbtn(){
				this.checkbox = this.checkbox==true?false:true;
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request('appapi/manage/customer/major', 'POST', {
					page: page || 1,
					limit: _this.limit,
					keyword: this.sjinfo,
					major: 0,
					type: 'all', //all=全部,district=片区,line=线路
					district_id: this.pianquid, //片区id
					customerline_id: "", //线路id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			submit(){
				if(this.current==''){
					return
				}
				httpRequest.request('appapi/manage/customer/major_add', 'POST', {
					id:this.current
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg);
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						})
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			selectItem(item){
				this.current = item.id
			},
			// 获取片区接口
			getpianqu() {
				httpRequest.request('appapi/manage/index/district', 'POST', {
					isTree: 0
				}, false, false, true).then(res => {
					this.columnspianqu.push(res.data)
				})
			},
			// 片区确定
			pianquconfirm(e) {
				this.pqtext = e.value[0].name
				this.pianquid = e.value[0].id
				this.pianqu = false
			},
			// 筛选弹出层确认
			surepop() {
				this.show = false
				this.init()
			},
			resetbtn() {
				this.pianquid = ""
				this.show = false
				this.init()
			},
			cancel() {
				this.show = false;
			},
			close() {
				this.show = false
				// console.log('close');
			},
			
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.leftradio {
		width: 8%;
	}

	// 选中的单选按钮
	.selecticon {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		border: 1rpx solid #00B855;
		background-color: #00B855;

		image {
			width: 15rpx;
			height: 10rpx;
			margin-bottom: 22rpx;
			margin-left: 2rpx;
		}
	}

	// 未选中的单选按钮
	.noselecticon {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		border: 1rpx solid #999999;
	}

	.surebtn {
		width: 45%;
	}

	.reset {
		background: #ebb563;
	}

	.input-text {
		width: 488rpx;
		padding: 18rpx 0 18rpx 32rpx;
		background: rgba(153, 153, 153, .1);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.sousuo {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.ylable {
		position: absolute;
		right: -30rpx;
		top: -30rpx;
		padding: 10rpx 30rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #C8101C;
		background-color: #FAE1E1;
		line-height: 23rpx;
		border-bottom-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.importtwo {
		color: #FFAE68;
		background-color: #F9EBDD;
	}

	.importthree {
		color: #FFAE68;
		background-color: #F9EBDD;
	}

	.importfour {
		color: #478FDB;
		background-color: #E2EDFB;
	}

	.importfive {
		color: #59C38F;
		background-color: #E3F2E8;
	}

	// 顶部搜索
	.searchimg {
		width: 24rpx;
		height: 24rpx;
		background-image: url("@/static/image/system/search.png");
		background-size: 100% 100%;
	}

	.itemscreenfocus {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
	}

	.searchbox {
		width: 35%;
		padding: 12rpx 20rpx;
		box-sizing: border-box;
		background-color: #f3f3f3;
		border-radius: 50rpx;

		input {
			width: 80%;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}

	.selectboxtop {
		width: 40%;
		padding: 12rpx 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		background-color: #f7f9fa;
		border-radius: 50rpx;

		input {
			width: 80%;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}

	.selectboxtop2 {
		width: 100%;
		padding: 12rpx 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		background-color: #f7f9fa;
		border-radius: 50rpx;

		input {
			width: 80%;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}

	// tab切换
	.selectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
		line-height: 33rpx;
		background-color: #e1f4f5;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	.noselectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
		line-height: 33rpx;
		background-color: #eff0f0;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	.selecttimetext {
		font-size: 24rpx;
		font-family: San Francisco Display-Medium, San Francisco Display;
		font-weight: 500;
		color: #666666;
		line-height: 24rpx;
	}

	// 内容
	.smalltext {
		width: 300rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #737373;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.dizhi {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #737373;
	}

	.screenbox {
		width: 33.33%;
	}

	.itemscreen {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background-color: #f7f9fa;
	}

	.inputscreenbox {
		width: 40%;

		input {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999;
			background-color: #f7f9fa;
		}
	}

	.zwscreenbox {
		width: 20%;
		line-height: 80rpx;
	}

	// 更换样式/////////////////////////////////////////
	.itemscreen2 {
		padding-bottom: 20rpx;
	}

	.minwidth {
		min-width: 130rpx;
	}

	.rightscreen {
		width: 100%;
	}
</style>
